<!--
Template Name: backend-layou
Create author: qinglong
Create Time  : 2020-07-22
-->
<template>
  <div class="app-body user" :key="refreshKey" v-loading="loading" element-loading-text="正在释放缓存……" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="app-header" user="primary">
      <div class="left">
        <div class="item logo">
          管理后台
        </div>
        <div class="item icon">
          <el-tooltip effect="light" :content="isCollapse ? '显示侧边栏' : '隐藏侧边栏'" placement="right-end">
            <i :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="isCollapse = !isCollapse"></i>
          </el-tooltip>
        </div>
        <div class="item itema" @click="refresh">
          <el-tooltip content="刷新缓存" effect="light">
            <span>
              <i class="el-icon-refresh"></i>
            </span>
          </el-tooltip>
        </div>
        <template v-for="(item, index) in $store.state.routes">
          <div class="itema" :key="index" :class="{ active: targetIndex == item.name }" @click="toggle(item.name)" v-role="item.id">
            {{ item.meta.title }}
          </div>
        </template>
      </div>
      <div class="center"></div>
      <div class="right">
        <div class="itema">
          <el-tooltip content="修改主题色"> </el-tooltip>
        </div>
        <div class="itema" @click.stop="$router.push('/user/info')">
          <el-tooltip content="修改个人信息">
            <el-avatar :size="30" :src="$store.state.userinfo.pic" @error="() => true"><img src="/favicon.ico" /></el-avatar>
          </el-tooltip>
        </div>
        <div class="item">
          {{ $store.state.userinfo.nickname }}
          {{ $store.state.userinfo.mobile }}
        </div>
        <div class="itema">
          <el-tooltip content="设置">
            <el-dropdown trigger="click">
              <i class="el-icon-s-tools" style="font-size:18px;cursor: pointer;"></i>
              <el-dropdown-menu slot="dropdown">
                <template v-for="(item, index) in settingList">
                  <el-dropdown-item :key="index" v-if="item.show" @click.native="item.event()">{{ item.label }}</el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </el-dropdown>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="app-container">
      <div class="app-side" v-show="!isCollapse">
        <el-scrollbar>
          <el-menu :collapse-transition="false" :default-active="$route.name" :collapse="isCollapse" class="el-menu-vertical-demo" router unique-opened>
            <template v-for="(item, index) in $store.state.menu[0].children">
              <el-submenu :index="item.name" :key="index" :route="item" v-if="item.children && item.children.length">
                <template slot="title">
                  <i :class="['iconfont ', item.icon]"></i>
                  <span slot="title">{{ item.title || item.meta.title }}</span>
                </template>
                <template v-for="(k, i) in item.children">
                  <el-menu-item :index="k.name" :key="i" :route="k">
                    <i :class="['iconfont', k.icon]"></i>
                    <span slot="title">{{ k.title || k.meta.title }}</span>
                  </el-menu-item>
                </template>
              </el-submenu>
              <el-menu-item :index="item.name" :key="index" :route="item" v-else>
                <i :class="['iconfont', item.icon]"></i>
                <span slot="title">{{ item.title || item.meta.title }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-scrollbar>
      </div>
      <div class="app-content">
        <div class="top">
          <el-tabs :value="activeName" type="card" @tab-remove="delTab" @tab-click="onTab" user="el-tabs">
            <template v-for="(item, index) in $store.state.tabmenu">
              <el-tab-pane :key="item.fullPath" :label="item.title" :name="item.fullPath" :closable="index > 0"></el-tab-pane>
            </template>
          </el-tabs>
        </div>
        <div class="content-body">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </div>
      </div>
    </div>
    <audio src="~@/assets/audio/msg.mp3" preload ref="audio" />
    <audio src="~@/assets/audio/xibao.mp3" preload ref="dialogAudio"></audio>
    <template v-for="item in message">
      <mixMessage :value="item" :key="item.id" v-if="item.show" @input="item.show = false" />
    </template>
    <!-- <mixXibao v-model="xibao" /> -->
    <!-- <div class="EXEVERSION">Beta：v{{EXEVERSION}}</div> -->
    <el-dialog :visible.sync="userinfoShow.show" width="900px" title="资料管理">
      <userinfoChange :isShow="userinfoShow" style="height:60vh;min-height:600px" />
    </el-dialog>
  </div>
</template>
<script>
import logo from '@/assets/image/logo.png';
import logo1 from '@/assets/image/logo1.png';

export default {
  name: 'Backend',
  components: {
    userinfoChange: () => import('@/views/user/info')
  },
  data() {
    return {
      logo,
      logo1,
      ws: null,
      loading: false,
      message: [],
      userinfoShow: { show: false },
      settingList: [
        {
          label: '修改资料',
          event: () => (this.userinfoShow = { show: true, type: 'info' }),
          show: true
        },
        {
          label: '修改头像',
          event: () => (this.userinfoShow = { show: true, type: 'avatar' }),
          show: true
        },
        {
          label: '修改密码',
          event: () => (this.userinfoShow = { show: true, type: 'password' }),
          show: true
        },
        { label: '检查更新', event: this.update, show: this.isElectron },
        // {
        //   label: "喜报",
        //   event: () => this.onMessage({ type: "dialog", data: {} }),
        //   show: true
        // },
        { label: '退出登录', event: this.logout, show: !this.isElectron },
        {
          label: '切换账号',
          event: () => {
            window.ipcRenderer.send('removeStore', 'userinfo');
            this.$router.push('/login');
          },
          show: this.isElectron
        },
        {
          label: '退出系统',
          event: () => window.ipcRenderer.send('close'),
          show: this.isElectron
        }
      ],
      xibao: { show: false },
      refreshKey: 0,
      // 菜单折叠
      isCollapse: false,
      // 风格主题
      theme: this.$store.state.userinfo.theme,
      // 当前管理系统
      targetIndex: sessionStorage.getItem('xitong') || 'crm',
      // 用户信息
      userinfo: this.getstore('userinfo') || {}
    };
  },
  created() {
    this.$alert('确认开启浏览器声音提示！');
  },
  computed: {
    activeName() {
      let name = this.$store.state.tabmenu.filter(e => e.active);
      name = name[0];
      return name && name.fullPath;
    }
  },
  mounted() {
    this.socket.on('message', data => {
      try {
        console.log(1, '确定后端返回的数据类型', typeof data, data);
        data = JSON.parse(data);
        console.log(2, '解析成功后的数据', typeof data, data);
        if (data.type == 'message') {
          // 桌面应用端
          if (this.isElectron) {
            this.ipcRenderer.send('msg', data);
          } else {
            // 浏览器端 系统信息
            if (!window.Notification) return;
            let options = {
              dir: 'ltr',
              icon: 'favicon.ico',
              data: data.message,
              timeoutType: 'never'
            };
            let notification = new window.Notification(data.title, options);
            notification.onclick = window.focus;
          }
        }
        if (data.type == 'dialog' && this.isElectron) {
          // 桌面应用端 dialog通知
          this.ipcRenderer.send('dialog', data);
        }
        this.onMessage(data);
      } catch (error) {
        console.log(error);
      }
    });
  },

  updated() {
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      this.loading = false;
    }, 1000);
  },
  methods: {
    onMessage(data) {
      if (data.type == 'message') {
        this.message.push({ ...data, show: true });
        this.$refs.audio.play();
        this.$store.commit('updateMessage');
      }
      if (data.type == 'dialog') {
        this.$refs.dialogAudio.play();
        this.$refs.dialogAudio.onended = () => {
          this.xibao.show = false;
        };
        this.xibao.show = true;
        this.xibao.data = data;
      }
      if (data.type == 'dashboard') {
        console.log('dashboard');
      }
    },
    delTab(name) {
      this.$store.commit('delTabmenu', name);
    },
    onTab(item) {
      this.$router.push(item.name);
    },
    toggle(val) {
      if (this.targetIndex == val) return;
      this.targetIndex = val;
      sessionStorage.setItem('xitong', val);
      // 初始化路由表
      this.$router.setRoles();
      // 初始化tabmenu
      this.$store.commit('removeTabmenu');
      let path = this.$store.state.menu[0].path;
      if (this.$store.state.menu[0].children && this.$store.state.menu[0].children[0]) {
        path = this.$store.state.menu[0].path + '/' + this.$store.state.menu[0].children[0].path;
      }
      // console.log(path);
      this.$router.replace(path);
    },
    logout() {
      this.$router.replace('/login');
    },
    async refresh() {
      this.loading = true;
      this.refreshKey = Math.random();
      let { data } = await this.axios('/adminapi/User/information', {
        data: { uid: this.userinfo.id }
      });
      if (!data.code) {
        this.$router.replace('/login');
        return;
      }
      this.$store.commit('setUserinfo', data.data);
      this.$router.setRoles();
      setTimeout(() => {
        window.location.reload();
      }, 500);
    },
    update() {
      if (this.isElectron) window.ipcRenderer.send('queryUpdate');
    },
    handerSetting(item) {
      item.event();
    }
  },
  beforeRouteLeave(to, from, next) {
    clearTimeout(this.timer);
    next();
  }
};
</script>
<style lang="less" scoped>
.v-enter-active {
  transition: all 0.6s ease;
  transition-delay: 0.6s;
}
.v-leave-active {
  transition: all 0.6s ease;
}
.app-body {
  overflow: hidden;
  width: 100%;
  min-width: 900px;
  height: 100vh;
  .app-header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #fff;
    .left {
      flex: auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 100%;
      .logo {
        max-width: 150px;
        width: 150px;
        height: 90%;
        overflow: hidden;
        margin: 0 5px;
        // transition: all 0.6s;
        &.scale {
          max-width: 50px;
          width: 50px;
          // transition: all 0.7s;
          padding: 0 5px;
        }
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
    .center {
      flex: auto;
      display: flex;
      justify-content: center;
    }
    .right {
      flex: auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    .icon {
      font-size: 22px;
      padding: 0 10px;
      overflow: hidden;
      cursor: pointer;
    }
    .item,
    .itema {
      margin: 0 5px;
      padding: 0 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      // transition: all 0.6s;
      position: relative;
      &.active {
        background: rgba(1, 1, 1, 0.2);
      }
    }
    .itema {
      cursor: pointer;
      height: 100%;
    }
  }
  .app-container {
    display: flex;
    justify-content: space-between;
    height: calc(100% - 41px);
    .app-side {
      border-right: 1px solid #e6e6e6;
      box-shadow: 0 10px 10px rgba(1, 1, 1, 0.1);
      height: 100%;
      overflow: hidden;
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 250px;
        min-width: 250px;
        min-height: 250px;
      }
      .el-menu {
        border: none;
      }
    }
    .app-content {
      flex: 1;
      height: 100%;
      overflow: hidden;
      transition: all 0.2s;
      .top {
        box-shadow: 0 0 20px rgba(1, 1, 1, 0.1);
        /deep/ .el-tabs__header.is-top {
          margin: 0;
        }
      }
      .bottom {
        overflow: hidden;
        height: calc(100% - 40px);
        padding: 0 20px;
      }
    }
  }
}
.iconfont {
  font-size: 22px;
  margin-right: 8px;
}
.EXEVERSION {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  position: absolute;
  // top: -17px;
  bottom: 0;
  right: 0px;
  white-space: nowrap;
  // transform: scale(0.8);
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 0 5px;
  margin: 5px;
  border-radius: 5px;
  background: #fff;
}
</style>
